.contain_wrap {
  height: 100vh;
}
.teacherBoard {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  .is_not_write_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;left: 0;
    z-index: 999;
  }
}

.live_wrap {
  overflow: hidden;
  height: 100%;
  &.open_white_boarding {
    position: fixed;
    width: 30%;
    height: 30%;
    left: 70%;
    top: 0;
    overflow: hidden;
    z-index: 1009;
    .host_info {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 10px;
      z-index: 9999;
      text-shadow: 2px 2px 6px #000;
      box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.75);
      background: rgba(0, 0, 0, 0.25);
      padding: 5px 10px;
      border-radius: 4px;
      h2 {
        font-weight: 400;
        font-size: 12px;
        span {
          margin-left: 12px;
        }
      }
      p {
        span {
          font-family: Arial, Helvetica, sans-serif;
          letter-spacing: 4px;
        }
      }
    }
  }
  .video_wrap {
    height: 100%;
    background: #000;
    &.video_wrap_half {
      width: 50%;
    }
  }
}

#listenSpeaker_live_video {
  video {
    object-fit: contain !important;
  }
}

.live_other_wrap {
  // padding: 2px;
  overflow: hidden;
  z-index: 10;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0 !important;
  right: 0;
  // background: red;
  // border-left: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &>div {
    float: left;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    position: relative;
    // margin-bottom: 10px;
    p {
      padding: 5px 10px;
      position: absolute;
      left: 0;
      top: 10px;
      color: #fff;
      z-index: 99;
      font-size: 15px;
    }
    .other_video_wrap {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    video {
      object-fit: contain !important;
    }
  }
}